<template is="msgItem1">
	<view class="content">
		
		<view class="user-content">
			<view class="user-img" @click="login"><img :src="userimg"></view>
			<view class="user-name" @click="login">{{username}}</view>
			<view class="withdrawal" @click="gototixian"><img src="/static/money.png">提现</view>
			<view class="user-type">
				<view class="received" :class="{'active':showh=='0'}" @click="tabsw(0)">收到的红包<view class="border"></view></view>
				<view class="issue" :class="{'active':showh=='1'}" @click="tabsw(1)">发出的红包<view class="border"></view></view>
			</view>
			
		</view>
		
		<view class="hongbao-list" v-if="showh == '0'">
			
			<view class="list" v-for="(vo,index) in shoudao" :key="index" @tap="gotohbcontent(vo.lm_id)">
				
				<view class="list-left">
					<view class="hongclass"><img src="/static/hongbaolist.png"></view>
					<view class="content">
						<view class="title">红包—来自{{vo.nick}}</view>
						<view class="time">{{ctime}}</view>
					</view>
				</view>
				
				<view class="money">+{{vo.receive}}</view>
			</view>
			
			<view class="shixiao" v-if="shoudao.length==0">
				<img src="/static/no.png">
				<view>暂无红包~</view>
			</view>
			
		</view>
		
		<view class="hongbao-list" v-if="showh == '1'">
			
			<view class="list" v-for="(vo,index) in huoqu" :key="index" v-if="vo.pay_status == 1" @tap="gotohbcontent(vo.id)">
				
				<view class="list-left" >
					<view class="hongclass"><img src="/static/hongbaolist.png"></view>
					<view class="content">
						<view class="title">红包—来自{{username}}</view>
						<view class="time">{{vo.ctime}}</view>
					</view>
				</view>
				
				<view class="c-money">-{{vo.pay_money}}</view>
			</view>
			
			<view class="shixiao" v-if="huoqu.length==0">
				<img src="/static/no.png">
				<view>暂无红包~</view>
			</view>
			
		</view>
		
		
		
		
		<view class="bottom-title">——  奇点科技  ——</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showh:"0",
				userimg:"/static/user_img.jpg",
				username:"点击授权登陆",
				token:"",
				
				shoudao:"",
				huoqu:""
			};
		},
		onShow() {
			var _self = this
			
			const value = uni.getStorageSync('userinfo');
			if (value) {
				_self.userimg = value.avatar
				_self.username = value.username
				_self.token = value.token
				uni.request({
				    url: _self.$url + '/api/user/harvestLuckyMoney', //仅为示例，并非真实接口地址。
					method:"post",
				    data: {
				        page:1,
						limit:100
				    },
					header: {
						'token': _self.token 
					},
				    success: (res) => {
						_self.shoudao = res.data.result.data
						console.log(_self.shoudao)
				    }
				});
				uni.request({
				    url: _self.$url + '/api/user/releaseLuckMoney', //仅为示例，并非真实接口地址。
					method:"post",
				    data: {
				        page:1,
						limit:100
				    },
					header: {
						'token': _self.token 
					},
				    success: (res) => {
						_self.huoqu = res.data.result.data
				    }
				});
			}else{
				_self.userimg = "/static/user_img.jpg"
				_self.username = "点击授权登陆"
			}
			
			
			// uni.checkSession({
			// 	success () {
					
			// 	},
			// 	fail () {
			// 		uni.navigateTo({
			// 		    url: '/pages/index/authorization',
			// 		    animationType: 'pop-in',
			// 		    animationDuration: 200
			// 		});
			// 	}
			// })
			
		},
		onLoad() {
			
		},
		methods: {
			tabsw(id){
				this.showh = id
			},//切换
			login(){
				var login = uni.getStorageSync('userinfo');
				if(login){
					
				}else{
					uni.navigateTo({
					    url: '/pages/index/authorization',
					    animationType: 'pop-in',
					    animationDuration: 200
					});
				}
				
			},
			gototixian(){
				uni.navigateTo({
				    url: '/pages/index/withdrawal',
				    animationType: 'pop-in',
				    animationDuration: 200
				});
			},
			gotohbcontent(id){
				uni.navigateTo({
				    url: '/pages/index/receive_user?id=' + id,
				    animationType: 'pop-in',
				    animationDuration: 200
				});
			}//跳转红包详情
		}
	}
</script>

<style lang="scss">
	body{
		background: #fafafa;
		font-size: 14px;
	}
	view{
		box-sizing: border-box;
	}
	.user-content{
		background: url(../../static/bg.png);
		width: 100%;
		height: 400rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		.user-img{
			margin-top:50rpx;
			img{
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
			}
		}
		.user-name{
			color:#fff;
			margin-top:10rpx;
		}
		.withdrawal{
			position: absolute;
			top:10rpx;
			right:0;
			background: #FFC35C;
			width: 150rpx;
			border-radius: 15px 0px 0px 15px;
			padding:10rpx 0;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			color:#fff;
			img{
				width: 25rpx;
				height: 25rpx;
				margin-right:10rpx;
			}
		}
		.user-type{
			background: #fff;
			border-radius: 5px;
			width: 90%;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
			position: absolute;
			bottom:-85rpx;
			padding:35rpx 0;
			position: relative;
			.received{
				position: relative;
			}
			.issue{
				position: relative;
			}
			.active{
				color:#F4313E;
				.border{
					position: absolute;
					width: 100rpx;
					border:2rpx solid #F4313E;
					bottom:-31rpx;
					left: 20rpx;
				}
			}
			
		}
	}
	.hongbao-list{
		width: 100%;
		margin-top:100rpx;
		.list{
			width: 90%;
			margin:0 auto;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			border-bottom:1px solid #DDDDDD;
			padding:25rpx 0;
			.list-left{
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				.time{
					margin-top:5rpx;
					color:#999999;
				}
			}
			.hongclass{
				background: #F4313E;
				width: 70rpx;
				height: 70rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				border-radius: 50%;
				margin-right:20rpx;
				img{
					width: 30rpx;
					height: 30rpx;
				}
			}
			.money{
				color:#F4313E;
			}
			.c-money{
				color:#FFA711;
			}
			
		}
	}
	.bottom-title{
		width: 100%;
		text-align: center;
		margin-top:150rpx;
		margin-bottom:70rpx;
		color:#999999;
	}
	.shixiao{
		width: 100%;
		margin-top:220rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		img{
			width: 200rpx;
			height: 200rpx;
			margin-bottom:30rpx;
		}
	}
</style>
